import React, { useEffect, useState } from 'react'
import request from '../../api/request'
import styles from './index.module.css'
import { FlagOutline, BellOutline } from 'antd-mobile-icons'
import { Avatar, SearchBar } from 'antd-mobile'
import { Image, List,Card,Button } from 'antd-mobile'
import { HeartFill } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { AntOutline ,RightOutline} from 'antd-mobile-icons'

function Home() {
  let touxing=JSON.parse(localStorage.getItem('userInfo'))
  const Navigate = useNavigate()
  const [list, setList] = useState([])

  const getlist = async () => {
    const res = await request.get('/api/list')
    console.log(res);
    let { code, data } = res.data
    if (code == 200) {
      setList([...list, ...data])
    }
  }
  useEffect(() => {
    getlist()
  }, [])

  // 红心
  const [heart,setHeart]=useState(JSON.parse(localStorage.getItem('heart'))||[])
  
  const  xin=(item)=>{
    let xin=heart.some((it)=>it.id==item.id)
    if(xin){
      const shou=heart.filter((it)=>it.id!==item.id)
       setHeart(shou)
      localStorage.setItem('heart',JSON.stringify([...heart,item]))
    }
    else{
      setHeart([...heart,item])
         localStorage.setItem('heart',JSON.stringify([...heart,item]))
    }
  }

  const detllist=(item)=>{
    Navigate('/dttaill',{
      state:item
    })
  }
  return (
    <div>
      <div className={styles.box_css}>
        <div className={styles.ding_css}>
          <FlagOutline style={{ fontSize: '20px', marginRight: '5px' }} /><span>订票服务</span>
          <div className={styles.dian_css}></div>
          <span><BellOutline style={{ fontSize: '20px', position: 'fixed', left: '260px', top: '20px' }} /></span>
        </div>
        {/* <div className={styles.icon_css}>
            <img src={touxing.avatar} width={50} height={50}></img>
        </div> */}
      
      
        <br />
        <span style={{ color: '#fff', fontSize: '18px', padding: '24px' }}>大家可以随时随地发现精彩活动就在你身边。</span>
        <div>
          <SearchBar
            placeholder='输入关键字'
            showCancelButton
            style={{
              width: '330px',
              marginLeft: '20px',
              marginTop: '18px',
              '--border-radius': '100px',
              '--background': '#ffffff',
              '--height': '45px',
              '--padding-left': '12px',
            }}
          />
          <div className={styles.mei_box}>
            <span>现场音乐会</span>
            <span>艺术展览</span>
            <span>专业研讨会</span>
            <span>体育团体竞争</span>
          </div>
        </div>
      </div>
      <div>
      </div>
      <div>
        <h3 style={{ padding: '15px 20px' }}>最新活动</h3>
        <div className={styles.yslist} style={{display:'flex',overflowX:'scroll'}}>
          {
            list.length > 0 && list.map((item, index) => {
              return <div key={index} >
                <Card
                onClick={()=>detllist(item)}
                  // icon={<AntOutline style={{ color: '#1677ff' }} />}
                  title={<div style={{ fontWeight: 'normal' }}><Image  style={{width:'200px',height:'200px'}} src={item.image}></Image></div>}
                  extra={<HeartFill onClick={()=>xin(item)} color={heart.some((it)=>it.id==item.id)?'red':'#ccc'} />}
                  // onBodyClick={onBodyClick}
                  // onHeaderClick={onHeaderClick}
                  style={{ borderRadius: '16px' }}
                >
                  <div className={styles.content}>卡片内容</div>
                  <div className={styles.footer} onClick={e => e.stopPropagation()}>
                  <div>的东西发的</div>
                  </div>
                </Card>
              </div>
            })
          }
        </div>
      </div>
          <div>
        {/* <img src={touxing.avatar} width={50} height={50}></img> */}
          </div>
    </div>
  )
}

export default Home
